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Mavzu: CSS Freymvorklari va ular bilan ishlash 
Reja: 
1.CSS Freymvorklari. 
2. Bootstrap va uning afzaliklari. 
3.Xulosa. 


CSS Freymvorklari (ramkalari) - bu veb-interfeyslar va veb- 
saytlarni yaratishning o'rtacha va umumiy vazifalarini 
osonlashtirish uchun mo'ljallangan uslublar va dizayn ramkalari 
to'plami. Ushbu ramkalar veb-ishlab chiquvchilarga qayta-qayta 
kod yozishga hojat qolmaganda yordam beradi. 


Quyida eng mashhur CSS ramkalar keltirilgan: 


1.Bootstrap: Eng mashhur veb-ramkalardan biri va keng 
qo'llaniladi. Yorliqlar va ko'p funktsiyali komponentlar bilan 
bootstrap super, modulli va o'zgartiriladigan dizayn va interfeysni 
tez va oson yaratishni ta'minlaydi. 


2.Tailwind CSS: Bu ramka eng noyob va muhim CSS ramkalaridan 
biridir. Ushbu ramka sizga har xil yo'llar bilan o'zgartirishlar kiritish 
imkonini beradi. Barcha kerakli usullardan foydalangan holda, 
Tailwind dizaynni ma'lum bir tarzda ko'rsatish uchun ishlatilishi 
mumkin. 


3.Materialize CSS: Google Material Design Guide asosida, 
Materialize CSS zamonaviy dizaynni osonlashtiradigan 
xususiyatlarga ega. Ushbu ramka animatsiyalar, ranglar va 
komponentlardan iborat foydalanish uchun qulay kutubxonadir. 


4.Foundation: Foundation qisqa vaqt ichida veb-saytlarni yaratish 
uchun mo'ljallangan ramkadir. U barcha turdagi qurilmalar bilan 
ishlaydigan qulay va ko'p funktsiyali komponentlarga ega. 


Ramkalar bilan ishlash sizga dizayn va interfeysni tez va oson 
yaratish, kodni qayta yozishdan tejash va muhim uslublarni qo'llash 
imkonini beradi. Ushbu ramkalar o'rtasida tanlov qilishda, 


loyihangizning mahsuloti ма dizaynini дапаау olishingizni 
tushunishingiz muhimdir. 
Men CSS Fremvorklaridan Bootstrapni tanladim va uning 5- 
versiyasini hozirda o'rganmoqdaman. 
Bootstrap 5 

Bootstrap 5 - Bootstrap-ning eng yangi versiyasi bo'lib, u sezgir, 
birinchi mobil veb-saytlarni yaratish uchun eng mashhur HTML, CSS 
va JavaScript asosidir. 
Bootstrap 5 - Bootstrapning eng yangi versiyasi; yangi 
komponentlar, tezroq uslublar jadvali va ko'proq sezgirlik bilan. 
Bootstrap 5 barcha asosiy brauzerlar va platformalarning so'nggi, 
barqaror versiyalarini qo'llab-quvvatlaydi. Biroq, Internet Explorer 
11 va undan past versiyalari qo'llab-quvvatlanmaydi. 
Bootstrap 5 va Bootstrap 3 & 4 o'rtasidagi asosiy farq shundaki, 
Bootstrap 5 jQuery o'rniga JavaScript-ga o'tgan. 
Bootstrap 3 va Bootstrap 4 hali ham jiddiy xatolarni tuzatish va 
hujjatlarni o'zgartirish uchun jamoa tomonidan qo'llab-quvvatlanadi 
va ulardan foydalanishni davom ettirish mutlaqo xavfsizdir. Biroq, 
ularga yangi xususiyatlar qo'shilmaydi. 
Bootstrap nima? 
Bootstrap - bu tezroq va osonroq veb-ishlab chiqish uchun bepul 
front-end ramka 
Bootstrap matbaa, shakllar, tugmalar, jadvallar, navigatsiya, 
modallar, tasvir karusellari va boshqa ko'plab, shuningdek, ixtiyoriy 
JavaScript plaginlari uchun HTML va CSS-ga asoslangan dizayn 
shablonlarini o'z ichiga oladi. 
Bootstrap ham sizga sezgir dizaynlarni osongina yaratish 
imkoniyatini beradi. 
Responsive veb-dizayn nima? 
Responsiv veb-dizayn kichik telefonlardan tortib katta ish 
stollarigacha bo'lgan barcha qurilmalarda avtomatik tarzda yaxshi 
ko'rinishga moslashadigan veb-saytlarni yaratishdir. 
Bootstrap qanday ulanadi. 
Bootstrapni ulashning eng oson usuli bu <head> ning ichiga ushbu 
bootstrapning linkini ulashdir. 


<link href="https://cdn.jsdelivr.net/npm/ 
bootstrap@5.3.2/dist/css/bootstrap.min.css" re 
l="stylesheet"> 


Bootstrap 5 konteynerlari: 


Oldingi bobdan bilib oldingizki, Bootstrap sayt mazmunini o'rash 
uchun oʻz ichiga olgan elementni talab qiladi. 

Konteynerlar ularning ichidagi tarkibni to'ldirish uchun ishlatiladi va 
ikkita konteyner klassi mavjud: 

.container sinfi sezgir kenglikdagi konteynerni ta'minlaydi 
.container-fluid sinfi ko'rish oynasining butun kengligini qamrab 
oluvchi to'liq kenglikdagi konteynerni ta'minlaydi. 

Bootstrap 5 Grid tizimi 

Bootstrap grid tizimi flexbox bilan qurilgan va sahifa bo'ylab 12 
tagacha ustunga ruxsat beradi. 

Bootstrap 5 da "ranglar orqali ma'no" berish uchun ishlatilishi 
mumkin bo'lgan ba'zi kontekstli sinflar mavjud. 


text-muted, .text-primary, .text-success, .text-info, .text 
-warning, .text-danger, .text-secondary, .text-white, .text 
-dark, .text-body 


Flexbox 


Bootstrap 3 va Bootstrap 4 va 5 o'rtasidagi eng katta farq shundaki, 
Bootstrap 5 endi tartibni boshqarish uchun floats o'rniga flexbox-dan 
foydalanadi. 


Flexible Box Layout moduli float yoki joylashishni aniqlashdan 
foydalanmasdan moslashuvchan moslashuvchan tartib tuzilishini 
loyihalashni osonlashtiradi. 


Gorizontal yo'nalish 


Egiluvchan elementlarni gorizontal ravishda (yonma-yon) ko'rsatish 
uchun .flex-row dan foydalaning. Namuna. 


<div class="d-flex flex-row bg-secondary"> 
<div class="p-2 bg-info">Flex item 1</div> 
<div class="p-2 bg-warning">Flex item 2</div> 
<div class="p-2 bg-primary">Flex item 3</div> 
</div> 


Natija: 


Moslashuvchan elementlarning hizalanishini o'zgartirish uchun .justify- 
content-* sinflaridan foydalaning. Yaroqli sinflar boshlang'ich (standart), 
tugatish, markaz, orasida yoki atrofida: 


<div class="d-flex justify-content-between bg-secondary mb-3"> 
<div class="p-2 bg-info">Flex item 1</div> 
<div class="p-2 bg-warning">Flex item 2</div> 
<div class="p-2 bg-primary">Flex item 3</div> 


</div> 


To'ldirish / Teng kenglik 


Egiluvchan elementlarni teng kengliklarga majburlash uchun .flex-fill 
dan foydalaning. 


Qolgan joyni egallash uchun moslashuvchan elementda .flex-grow-1 
dan foydalaning. Quyidagi misolda birinchi ikkita moslashuvchan 
element kerakli joyni egallaydi, oxirgi element esa mavjud bo'sh joyning 
qolgan qismini egallaydi. 


Quyidagi Templateni qilishda men Bootstrap dan foydalandim va uning 
navbar menyu qismini hosil qilishda flext texnologiyasidan foydalandim. 
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Меп bu templateni qilish davomida bootstrapdagi tayor klaslaridan keng 
foydalandim. 


Xulosa: Quyida Bootstrapning foydali va zararli tomonlari yozilgan. 


Tez Ishlovchi: Bootstrap, tez va oson ishlovchi sahifalarga yordam 
beradi. Boshqa stil va komponentlarni qo'llashga, siz tez ма samarali 
sahifalarni osonlik bilan bilib olishingiz mumkin. 


Responsive Dizayn: Bootstrap, responsive dizaynning asos vajibati 
bo'lgan media query-lar va flexbox yordamida sahifalarni qulay 
moslashuv imkonini beradi. Bu, sizning sahifangizni keng doirada 
jihozda to'g'ri ko'rishni ta'minlash. 

Komponentlar va Stil: Bootstrap, boshqa freymvorklarda o'lmasli uchun 
juda ko'p komponentlarga ega. Bu komponentlar, yorliqlar, formalar, 
modal oynalar, menyu va boshqa narsalarni boshqarishda o'z 
kuchingizga qulaylikka imkon beradi. 


Dokumentatsiya va Jamoa: Bootstrap, yaxshi xavfsizlik va chiroyli 
dokumentatsiyaga ega. Bu, dasturchilarga va dizaynerlarga yordam 
beradigan va jamiyat darajasida ommalashgan freymvorklar orasida 
eng mashhur bo'lishiga olib keladi. 


Bootstrapning zararli ta'siri: 


Unikal Dizayn: Freymvorkni juda ko'p qilish mumkin, va har bir 
sahifangizning bootstrapga o'xshash ko'rinishga ega bo'lishi mumkin. 
Bu, noyob dizayningiznida cheklanish bo'lishi mumkin. 


Xotira Qo'llanishi: Bootstrap, yuklanishi kerak bo'lgan stilmalar va 
skriptlar orqali ko'p xotirani band qiladi. Agar siz freymvork barcha 
komponentlarini ishlatmasangiz, bu qo'llanishni yengillashtirasiz. 


Tarqatish: Bootstrap, kerak emas bo'lgan komponentlar va stillar bilan 
yig'iladi. Agar sizning qaydingiz uchun faqat qisqa va qulay Bootstrap 
komponentlari kerak bo'lsa, freymvorkning hajmini ма yuklamasini 
qo'shib qo'yish bilan uzoqroq yo'l qo'yilishi mumkin. 


Foydalanilgan adabiyotlar: 
https://www.w3schools.com/bootstrap5/bootstrap get started. 
https://getbootstrap.com. 


